<extend name="_Layout/main"/>

<block name="style">
    <style type="text/css">
        .user-list .avatar {
            width: 100%;
        }
    </style>
</block>

<block name="script">
    <script type="text/javascript">
        $(function(){
            //设置头像的高度与宽度保持一致
            $('.user-list .avatar').height($(".user-list .avatar").width());
        })
    </script>
</block>

<block name="breadcrumb">
    <div id="breadcrumb" class="container">
        <ul class="breadcrumb">
            <li><i class="icon-location-arrow"></i></li>
            <li><a href="__ROOT__/">首页</a></li>
            <li><a href="{:U('')}">{$meta_title}</a></li>
        </ul>
    </div>
</block>

<block name="main">
    <section>
        <section class="vbox">
            <section id="vbox" class="scrollable wrapper-lg">

                <div class="row user_container">
                    <div class="cards cards-borderless user-list clearfix">
                        <volist name="user_list" id="vo">
                            <div class="col-xs-6 col-sm-3 col-md-2">
                                <div class="card margin-bottom">
                                    <a class="img-circle" href="{:U('User/home', array('uid' => $vo['id']))}">
                                        <img class="img-responsive avatar" src="{$vo.avatar|get_cover='avatar'}" alt="{$vo.username}">
                                    </a>
                                    <div class="card-heading">
                                        <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i> {$vo.good}</a></span>
                                        <a href="{:U('User/home', array('uid' => $vo['id']))}"><strong>{$vo.username}</strong></a>
                                      </div>
                                      <div class="card-actions">
                                        <span class="text-muted">加入时间：{$vo.ctime|time_format='Y-m-d'}</span>
                                    </div>
                                </div>
                            </div>
                        </volist>
                    </div>
                </div>
                <ul class="pagination"><notempty name="page">{$page}</notempty></ul>
            </section>
        </section>
    </section>

</block>
